<template>
  <div :style="{ width: '100%', height: echartHeight }">
    <!-- <div
      :id="echartId"
      :style="{ width: '100%', height: echartHeight, backgroundColor: 'pink' }"
    >
      123
    </div> -->

    <div style="height: 100%" :id="echartId"></div>
    <!-- <div v-if="data.length == 0" class="bar_defGraphWrap">
      <div class="bar_defGraph"></div>
      <div class="bar_graphText">暂无数据</div>
    </div> -->
  </div>
</template>

<script>
import this_$echarts from "@/libs/echart-import";
export default {
  name: 'barEchart',
  props: {
    echartId: {
      type: String,
      default: () => 'echartId'
    },
    data: {
      type: Array,
      default: () => ['123','123']
    },
    dataObj: {
      type: Object,
      default: () => {}
    },
    echartHeight: {
      type: String,
      default: () => '230px'
    },
    type: {
      type: String,
      default: () => ''
    }
  },
  data () {
    return {
      barLineChart: null,
      barLineData: [],
    }
  },
  watch: {
    data: {
      handler: function (newData, oldData) {
        this.data = newData
        this.getBarData()
      },
      deep: true
    },
    echartId: {
      handler (newVal, oldVal) {
        if (newVal != oldVal) {
          this.echartId = newVal
        }
      },
      deep: true
    }
  },
  created () {},
  mounted () {
    this.getBarData()
    window.addEventListener('resize', () => {
      this.barLineChart && this.barLineChart.resize()
    })
  },

  methods: {
    getBarData () {
      this.data.length > 0 || this.dataObj ? this.$nextTick(() => {
        this.barLineChart = this_$echarts.init(document.getElementById(this.echartId))
        this.barLineData = this.barLineChart
        if (['netType','page','DSCP','ipProto','ethernet'].includes(this.type)) {
          this.barLineChart.setOption(this.getBarOption(this.dataObj))
        } else {
          this.barLineChart.setOption(this.getBarOption12(this.data))
        }
        // chartShowName(this.barLineChart)
      }) : (this.barLineData = null)


      // this.data.length > 0 ? this.$nextTick(() => {
      //   this.barLineChart = this_$echarts.init(document.getElementById(this.echartId))
      //   this.barLineData = this.barLineChart
      //   if (this.type == 'DSCP') {
      //     this.barLineChart.setOption(this.getBarOption(this.dataObj))
      //   } else {
      //     this.barLineChart.setOption(this.getBarOption12(this.data))
      //   }
      //   // chartShowName(this.barLineChart)
      // }) : (this.barLineData = null)
    },

    getBarOption (data) {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
          },
          //  formatter: (params) => {
          //   let tip = ''
          //   if (params != null && params.length > 0) {
          //     //  tip += params[0].name+'<br />' + '<br/>'
          //     for (let i = 0; i < params.length; i++) {
          //       const value = params[i].value[0] + '<br/>' + '分数' + '&nbsp;:' + '&nbsp; &nbsp' + params[i].value[1]
          //       tip += value
          //     }
          //   }
          //   return tip;
          // }
        },
        grid: {
          left: '1%',
          right: '1%',
          bottom: '1%',
          top: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: {
              color: '#999999',
            },
            axisLine: { show: false },
            // boundaryGap: true, // 坐标轴两边是否留⽩
            triggerEvent: true,
            // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            data: data.name,
            axisTick: {
              show: false,
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: {
              margin: 2,
              interval: 15,
              color: '#999999',
            }
          }
        ],
        series: [
          {
            name: '直接访问',
            type: 'bar',
            barWidth: '60%',
            // data: [10, 52, 200, 334, 390, 330, 220]
            data: data.total
          }
        ]
      }
    },

     // 柱状图配置
    getBarOption12 (data) {
      // let dataList = data.data.slice(0, 20)
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // type: 'cross'
            type: 'none'
          },
          backgroundColor: 'white',
          borderColor: '#999',
          borderRadius: 5,
          textStyle: {
            color: "#000" //设置文字颜色
          },
          extraCssText: 'box-shadow:0 0 3px rgba(0,0,0,0.3)',
          appendToBody: true
        },
        // legend: {
        //   type: 'scroll',
        //   bottom: 0,
        //   itemWidth: 10,
        //   itemHeight: 10,
        //   left: 'center',
        //   orient: "horizontal",
        //   data: ['药品费', '耗材费', '检验检查费', '其他费', '偏差级别', '药品费偏差级别', '耗材费偏差级别', '检验检查费偏差级别', '其他费偏差级别']
        // },

        grid: {
          bottom: '1%',
          left: '1%',
          right: '1%',
          top: '1%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            // axisLabel: { show: false },
            axisLabel: {
                    color: '#999999',
            },
            axisLine: {show: false},
            axisTick: { show: false },
            // boundaryGap: true, // 坐标轴两边是否留⽩
            triggerEvent: true,
            boundaryGap: ['20%', '20%'],
             data: ['药品费','耗材费', '检验检查费', '其他费','偏差级别','药品费偏差级别',  '耗材费偏差级别','检验检查费偏差级别', '其他费偏差级别']  

          }
        ],
        yAxis: [
          {
                type: 'value',
                axisLine: {show: false},
                axisTick: {show: false},
                axisLabel: {
                    margin: 2,
                    interval: 15,
                    color: '#999999',
                }
          },
          // {
          //       type: 'value',
          //       name: '增长率(%)',
          //       nameTextStyle: {
          //           color: '#999999',
          //       },
          //       splitLine:{show: false},//去除网格线
          //       axisLine: {show: false}, //取消坐标轴线
          //       axisTick: {show: false}, // 去掉刻度线
          //       axisLabel: {
          //           margin: 2,
          //           interval: 15,
          //           color: '#999999',
          //       }
          //   }
        ],
        series: [
       {
                name: '药品费',
                type: 'bar', // 这个是柱状图的类型，设置成这个就是柱状图
                // barWidth: 20, // 柱子的宽度，设置一个就行了，别的也会采用这个宽度
                // stack: 'Ad', // 设置这个就会成为堆叠柱状图
                data:  [4, 4, 5, 3, 3, 3, 3, 3, 3, 3, 3,3]
            },
            {
                name: '耗材费',
                type: 'bar',
                // stack: 'Ad',
                data: [4, 4, 5, 3, 3, 3, 3, 3, 3, 3, 3,3]
            },
            {
                name: '检验检查费',
                type: 'bar',
                // stack: 'Ad',
                data: [4, 4, 5, 7, 3, 3, 3, 3, 3, 3, 3,3]
            },
            {
                name: '其他费',
                type: 'bar',
                // stack: 'Ad',
                data: [4, 4, 5, 3, 3, 3, 3, 3, 3, 3, 3,3]
          },
            {
                name: '偏差级别',
                type: 'bar',
                // stack: 'Ad',
                data: [4, 4, 5, 3, 3, 3, 3, 3, 3, 3, 3,3]
          },
            {
                name: '药品费偏差级别',
                type: 'bar',
                // stack: 'Ad',
                data: [4, 4, 5, 3, 3, 3, 3, 3, 3, 3, 3,3]
          },
            {
                name: '耗材费偏差级别',
                type: 'bar',
                // stack: 'Ad',
                data: [4, 4, 5, 3, 3, 3, 3, 3, 3, 3, 3,3]
          },
            {
                name: '检验检查费偏差级别',
                type: 'bar',
                // stack: 'Ad',
                data: [4, 4, 5, 3, 3, 3, 3, 3, 3, 3, 3,3]
          }
            
        ]

      }
    }
  }
}
</script>

<style scoped>
.bar_defGraphWrap {
  width: 100%;
  height: 100%;
  position: relative;
  top: 0;
  left: 0;
  padding-bottom: 10px;
}
.bar_defGraph {
  margin-left: 0px;
  height: 50%;
  width: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  background: url("../../../assets/globalIcon/defGraph.png") no-repeat center
    center;
  /* background-size: 100% 100%; */
  background-size: 50% 100%;
  transform: translate(-50%, -50%);
}
.bar_graphText {
  color: #888;
  font-size: 14px;
  text-align: center;
  margin-top: 20px;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>